<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>注册用户</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <th:block th:insert="~{/fixed/header::head}"></th:block>

</head>

<script>
    $(function (){
        //注册按钮点击事件
        $("#register").click(function (){
            //获取页面数据，并清除空格
            let inputLoginName = $.trim($("#inputLoginName").val());
            let inputUserPassword = $.trim($("#inputPassword").val());
            let inputUserName = $.trim($("#inputUserName").val());
            //判断是否有空值
            if ("" != inputLoginName && "" != inputUserPassword && "" != inputUserName){
                $.ajax({
                    url:"/checkReqister",
                    method:"POST",
                    data:{"loginName":inputLoginName,"userPassword":inputUserPassword,"userName":inputUserName},
                    success:function (data){
                        if (data){
                            location.href = "/login";
                        }else {
                            alert("有重复登录名");
                        }
                    }
                })
            }else {
                alert("登录名，密码和用户名不能为空");
            }
        })
    })
</script>

<body>
<!--头部导航条-->
<header>
    <div class="header-area">
        <div class="header-mid header-sticky" style="box-shadow: 0 10px 15px rgb(25 25 25 / 10%);">
            <div class="container">
                <div class="menu-wrapper">
                    <!-- Logo -->
                    <div class="logo">
                        <a th:href="@{/index}"><img th:src="@{/assets/img/logo/logo.png}" alt=""></a>
                    </div>
                    <!-- Main-menu -->
                    <div class="main-menu d-none d-lg-block">
                        <nav>
                            <ul id="navigation">
                                <li><a th:href="@{/index}">主页</a></li>
                                <li><a th:href="@{/orders}">我的订单</a></li>
                            </ul>
                        </nav>
                    </div>
                    <!-- Header Right -->
                    <div class="header-right">
                        <ul>
                            <li><a th:href="@{/user}"><span class="flaticon-user"></span></a></li>
                            <li><a th:href="@{/cart}"><span class="flaticon-shopping-cart"></span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- header end -->
<main class="login-bg" style="height: 88vh;">
    <!-- Register Area Start -->
    <div class="register-form-area" style="min-height: 85vh;">
        <div class="register-form text-center">

            <!-- Login Heading -->
            <div class="register-heading">
                <span>注&nbsp;&nbsp;册</span>
            </div>

            <!-- 注册提交 -->
            <form class="needs-validation" novalidate>
                <!-- Single Input Fields -->
                <div class="input-box">
                    <div class="single-input-fields">
                        <label>登录名</label>
                        <input type="text" id="inputLoginName" placeholder="输入登录名" maxlength="16" onkeyup="value=value.replace(/[\W]/g,'')"/>
                    </div>

                    <div class="single-input-fields">
                        <label>密&nbsp;码</label>
                        <input type="password" id="inputPassword" placeholder="输入密码" maxlength="18" onkeyup="value=value.replace(/[\W]/g,'')"/>
                    </div>

                    <div class="single-input-fields">
                        <label>用户名</label>
                        <input type="text" id="inputUserName" placeholder="输入用户名" maxlength="10" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"/>
                    </div>
                </div>
                <!-- form Footer -->
                <div class="register-footer">
                    <p> 已有账户?点击这里 <a th:href="@{/login}"> 登录</a></p>
                    <button id="register" type="button" class="submit-btn3">注册</button>
                </div>
            </form>

        </div>
    </div>
    <!-- Register Area End -->
</main>

<th:block th:insert="~{/fixed/footer::foot}"></th:block>
</body>
</html>